<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>legend</title>
    <link rel="stylesheet" href="index.css">
</head>
<div class="head">
    <div class="head_left">
        <h3>Legend!</h3>
    </div>
    <div class="head_right">
        <ul>
            <li><a href="">Portfolio</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Team</a></li>
            <li><a href="">Contact</a></li>
        </ul>

    </div>
</div>
<div class="header">
    <div class="title">
        <p> <span>Legend!</span> we make web a beautiful place.</p>
    </div>
    <div class="searchBox">
        <div class="search_top">
            <h3> Sign up for our Newsletter to be updated.</h3>
        </div>
        <div class="searchInput">
            <input type="search" placeholder="you@yourmail.com">
        </div>
        <div class="baidu">
            <button type="submit">Enter</button>
        </div>
    </div>
</div>
<div class="portfolio">
    <div class="icon">
        <div class="icon_up"><img src="img/Snipaste_pc.png" alt=""></div>
        <div class="icon_down">
            <p>Portfolio</p>
        </div>
    </div>
    <div class="cards w">
        <ul>
            <li>
                <img src="img/portfolio-01.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
            <li>
                <img src="img/portfolio-01.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
            <li>
                <img src="img/portfolio-01.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
            <li>
                <img src="img/portfolio-01.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
            <li>
                <img src="img/portfolio-01.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
            <li>
                <img src="img/portfolio-01.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
        </ul>
    </div>
</div>
<div class="services">
    <div class="icon">
        <div class="icon_up"><img src="img/Snipaste_ser.png" alt=""></div>
        <div class="icon_down">
            <p>Services</p>
        </div>
    </div>
    <div class="cards w">
        <ul>
            <li>
                <img src="img/portfolio-02.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
            <li>
                <img src="img/portfolio-02.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
            <li>
                <img src="img/portfolio-02.jpg" alt="">
                <h2>Ethan Marcotte Design</h2>
                <p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry. Lorem <br> Ipsum has been the industry's standard <br> dummy text ever since the 1500s, when <br> an unknown printer took a galley of type <br> and scrambled
                    it to make a type specimen <br> book.
                </p>
                <a href=""> VIEW PROJECT</a>
            </li>
        </ul>
    </div>
</div>
<div class="letter">
    <li>
        <h6>John Doe $ Sons</h6>
    </li>
    <div class="letter_content">
        <P>"We highly appreciate the <br> enthusiasm and creative talent of the <br> people at Legend!"</P>
    </div>
</div>
<div class="blog">
    <div class="icon">
        <div class="icon_up"><img src="img/Snipaste_pen2.png" alt=""></div>
        <div class="icon_down">
            <p>Blog</p>
        </div>
    </div>
    <div class="cards2 w">
        <ul>
            <li>
                <img src="img/blog_img-01.jpg" alt="">
                <p id="mouth">March 17, 2013</p>
                <h2>A girl running on a road</h2>
                <p>Lorem Ipsum is simply dummy text of the printing <br> and typesetting industry. Lorem Ipsum has been <br> the industry's standard dummy text ever since <br> the 1500s. …
                </p>
                <a href=""> READ MORE</a>
            </li>

            <li>
                <img src="img/blog_img-01.jpg" alt="">
                <p id="mouth">March 17, 2013</p>
                <h2>A girl running on a road</h2>
                <p>Lorem Ipsum is simply dummy text of the printing <br> and typesetting industry. Lorem Ipsum has been <br> the industry's standard dummy text ever since <br> the 1500s. …
                </p>
                <a href=""> READ MORE</a>
            </li>

            <li>
                <img src="img/blog_img-01.jpg" alt="">
                <p id="mouth">March 17, 2013</p>
                <h2>A girl running on a road</h2>
                <p>Lorem Ipsum is simply dummy text of the printing <br> and typesetting industry. Lorem Ipsum has been <br> the industry's standard dummy text ever since <br> the 1500s. …
                </p>
                <a href=""> READ MORE</a>
            </li>
        </ul>
    </div>
</div>

<div class="contact">
    <div class="icon">
        <div class="icon_up"><img src="img/Snipaste_pc.png" alt=""></div>
        <div class="icon_down">
            <p>Portfolio</p>
        </div>
    </div>
    <div class="human  w">
        <ul>
            <li>
                <a><img src="img/portrait-1.jpg"></a>
                <h2>Andrew</h2>
                <p>web designer</p>
            </li>
            <li>
                <a><img src="img/portrait-1.jpg"> </a>
                <h2>Andrew</h2>
                <p>web designer</p>
            </li>
            <li>
                <a><img src="img/portrait-1.jpg"> </a>
                <h2>Andrew</h2>
                <p>web designer</p>
            </li>
            <li>
                <a><img src="img/portrait-1.jpg"> </a>
                <h2>Andrew</h2>
                <p>web designer</p>
            </li>
            <li>
                <a><img src="img/portrait-1.jpg"> </a>
                <h2>Andrew</h2>
                <p>web designer</p>
            </li>
        </ul>
    </div>
    <div class="detial w">
        <ul>
            <li>
                <p>Want to know more ?
                    <span>a little about us</span></p>
            </li>
            <li><br>
                <br> I went down the street to a 24-hour grocery store. When I got there, the guy was locking the front door. I said, "Hey! The sign says you're open 24 hours." He Said, "Yes, but not in a row!" Anonymous. 2223 3459. Yo mama is so ugly
                she made my happy meal cry.
                <br>
                <br> I went down the street to a 24-hour grocery store. When I got there, the guy was locking the front door. I said, "Hey! The sign says you're open 24 hours." He Said, "Yes, but not in a row!" Anonymous. 2223 3459. Yo mama is so ugly
                she made my happy meal cry.<br>
                <br> I went down the street to a 24-hour grocery store. When I got there, the guy was locking the front door. I said, "Hey! The sign says you're open 24 hours." He Said, "Yes, but not in a row!" Anonymous. 2223 3459. Yo mama is so ugly
                she made my happy meal cry.
            </li>
        </ul>
    </div>
    <div class="icon1">
        <div class="icon_up1"><img src="img/Snipaste_pc.png" alt=""></div>
        <div class="icon_down1">
            <p>Portfolio</p>
        </div>
    </div>

    <div class="table_list w">
        <div class="table_input">
            <ul>
                <li>
                    <input type="text" placeholder="Your Name">
                </li>
                <li>
                    <input type="text" placeholder="Your Name">
                </li>
                <li>
                    <input type="text" placeholder="Your Name">
                </li>
                <li>
                    <input type="text" placeholder="Your Name">
                </li>
            </ul>
        </div>
        <div class="table_text">
            <textarea name="text"></textarea>
        </div>
        <div class="table_sub">
            <button type="submit">submit</button>
        </div>
    </div>
</div>

<div class="footer">
    <p>@copyright by wtu.zyf </p>
</div>
</body>

</html>